 <template>
  <div class="date">
    <!-- 年份 月份 -->
    <div class="month">
      <el-button type="text"
                 @click="weekPre"
                 icon="el-icon-arrow-left"></el-button>
      <p>{{getTitle()}}</p>
      <el-button type="text"
                 @click="weekNext"
                 icon="el-icon-arrow-right"></el-button>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>{{$t('common.mon')}}</li>
      <li>{{$t('common.tue')}}</li>
      <li>{{$t('common.wed')}}</li>
      <li>{{$t('common.thu')}}</li>
      <li>{{$t('common.fri')}}</li>
      <li>{{$t('common.sat')}}</li>
      <li>{{$t('common.sun')}}</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
      <li @click="pick(day)"
          v-for="(day, index) in days"
          :key="index">
        <!--本月-->
        <el-badge :is-dot="events.map(res=>res.startTime.substr(0,10)).indexOf(formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate())) !== -1">
          <span v-if="day.getMonth()+1 != currentMonth"
                :class="['other-month',formatDate(day.getFullYear() ,day.getMonth()+1, day.getDate()) === chooseDate?'active color-span-bg':'']">{{ day.getDate() }}</span>
          <span v-else>
            <!--今天-->
            <span v-if="formatDate(day.getFullYear() ,day.getMonth()+1, day.getDate()) === chooseDate"
                  class="active color-span-bg">{{ day.getDate() }}</span>
            <span v-else>{{ day.getDate() }}</span>
          </span>
        </el-badge>
      </li>
    </ul>
  </div>
</template>

 <script>
import { mapGetters } from 'vuex'

export default {
  name: 'date',
  props: {
    events: Array
  },
  data () {
    return {
      currentYear: 1970,  // 年份
      currentMonth: 1, // 月份
      currentDay: 1,  // 日期
      currentWeek: 1,  // 星期
      toYear: 190,
      toMonth: 1,
      toDay: 8,
      days: [],
      chooseDate: this.formatDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
    }
  },
  created () {
    this.initData(null)
    this.$emit('update-time', this.chooseDate)
    this.$emit('update-week', { startDate: this.formatDate(this.currentYear, this.currentMonth, this.currentDay), endDate: this.formatDate(this.toYear, this.toMonth, this.toDay) })
  },
  watch: {
    chooseDate () {
      this.$emit('update-time', this.chooseDate)
    }
  },
  computed: mapGetters(['language']),
  methods: {
    getTitle () {
      if (this.language === 'zh_CN') return `${this.currentYear}年${this.currentMonth}月${this.currentDay} ~ ${this.currentYear === this.toYear ? '' : `${this.toYear}年`}${this.toMonth}月${this.toDay}日`
      else return new Date(this.formatDate(this.currentYear, this.currentMonth, this.currentDay)).toString().substr(4, 11) + ' ~ ' + new Date(this.formatDate(this.toYear, this.toMonth, this.toDay)).toString().substr(4, 11)
    },
    formatDate (year, month, day) {
      const y = year
      let m = month
      if (m < 10) m = `0${m}`
      let d = day
      if (d < 10) d = `0${d}`
      return `${y}-${m}-${d}`
    },
    initData (cur) {
      let date = ''
      if (cur) {
        date = new Date(cur)
      } else {
        date = new Date()
      }
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1
      this.currentWeek = date.getDay()
      if (this.currentWeek === 0) {
        this.currentWeek = 7
        this.toYear = date.getFullYear()
        this.toMonth = date.getMonth() + 1
        this.toDay = date.getDate()
      }
      const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
      this.days.length = 0
      /* eslint-disabled */
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str)
        d.setDate(d.getDate() - i)
        this.days.push(d)
        if (i === this.currentWeek - 1) {
          this.currentDay = d.getDate()
          this.currentYear = d.getFullYear()
          this.currentMonth = d.getMonth() + 1
        }
      }
      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
        const d = new Date(str)
        d.setDate(d.getDate() + i)
        this.days.push(d)
        if (i === 7 - this.currentWeek) {
          this.toYear = d.getFullYear()
          this.toMonth = d.getMonth() + 1
          this.toDay = d.getDate()
        }
      }
    },

    // 上个星期
    weekPre () {
      const d = this.days[0]  // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() - 7)
      this.initData(d)
      this.$emit('update-week', { startDate: this.formatDate(this.currentYear, this.currentMonth, this.currentDay), endDate: this.formatDate(this.toYear, this.toMonth, this.toDay) })
    },

    // 下个星期
    weekNext () {
      const d = this.days[6]  // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() + 7)
      this.initData(d)
      this.$emit('update-week', { startDate: this.formatDate(this.currentYear, this.currentMonth, this.currentDay), endDate: this.formatDate(this.toYear, this.toMonth, this.toDay) })
    },

    // 上一個月  传入当前年份和月份
    pickPre (year, month) {
      const d = new Date(this.formatDate(year, month, 1))
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },


    // 下一個月  传入当前年份和月份
    pickNext (year, month) {
      const d = new Date(this.formatDate(year, month, 1))
      d.setDate(35)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },

    // 当前选择日期
    pick (date) {
      this.chooseDate = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
      // alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
    },
  },
}
</script>
<style lang="scss" scoped>
.date {
  height: 120px;
  color: #333;

  .month {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin: 0 5px;
    }
  }

  .weekdays {
    display: flex;
    font-size: 12px;
    margin-top: 10px;
    padding: 0;

    li {
      flex: 1;
      text-align: center;
      list-style: none;
      user-select: none;
    }
  }

  .days {
    display: flex;
    padding: 0;
    li {
      flex: 1;
      font-size: 12px;
      text-align: center;
      line-height: 40px;
      list-style: none;
      cursor: pointer;
    user-select: none;
      span {
        width: 40px;
        height: 40px;
        display: inline-block;
      }
      .active {
        color: #fff !important;
        border-radius: 50%;
      }

      .other-month {
        color: #999;
      }
    }
  }
}
/deep/.is-dot {
  right: 10px !important;
  top: 5px !important;
}
</style>